<template>
  <div>
    <Header @find="search"></Header>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table :data="tableData" style="width: 100%" height="542px">
        <el-table-column type="index" :index="getIndex" width="100" label="序号"/>
        <el-table-column prop="distributionTaskOrderId" width="200px" label="任务号"/>
        <el-table-column prop="customerName" width="150px" label="客户姓名"/>
        <el-table-column prop="commodityId" width="200px" label="商品ID"/>
        <el-table-column prop="commodityNum" width="100px" label="商品数量"/>
        <el-table-column prop="address" width="300px" label="投递地址"/>
        <el-table-column sortable prop="overTime" width="200px" label="要求完成日期"/>
        <el-table-column prop="taskType" width="150px" label="任务类型"/>
        <el-table-column prop="taskState" width="150px" label="任务状态"/>
      </el-table>
      <el-pagination
          background
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          layout="total, prev, pager, next"
          :total=totalSize
          @current-change="pageChange"
          style="margin-top: 15px"
          :current-page=pageNow
      >
      </el-pagination>
    </el-scrollbar>
  </div>
</template>

<script>
import Header from '@/components/Header'
import axios from "axios";
export default {
  name: "FindTaskList",
  components: {Header},
  data() {
    return {
      tableData:[

      ],
      status:'',
      type:'',
      typecase:['送货收款','收款','送货','退货','换货'],
      tvalue:'',
      pageSize:8,
      totalSize:100,
      pageNow:1
    }
  },
  methods:{
    search(status,tvalue,type){
      this.status = status;
      this.tvalue = tvalue;
      this.type = type;
      console.log(1)
      axios.post("http://localhost:1060/taskOrder/findByConditions",{
        status:status,
        date:tvalue,
        type:type,
        pageNow:1,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }

      })

    },
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1060/taskOrder/findByConditions",{
        status:this.status,
        date:this.tvalue,
        type:this.type,
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        }else {
        }

      })
    },
    search1() {
    },
    loadPost(){
      this.$axios.post("http://localhost:1060/taskOrder/findAll",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    }
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>
  body .el-table th.gutter {
    display: table-cell !important
  }
</style>